<template>
  <basic-container>
    <div class="dictory-wapper">
      <div class="btn-box">
        <div class="btn" v-hidden>
           <!-- <el-button @click="uploadFileOpen">上传文件</el-button> -->
           <!-- <el-button v-if="pageType==1" @click="xjWjj">新建文件夹</el-button> -->
        </div>
        <div class="search">
          <el-input clearable placeholder="请输入名称" v-model="searchVal" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="clickSearch"></el-button>
          </el-input>
        </div>
      </div>
      <div class="bread-box" v-if="breadList.length > 1">
        <div class="breadcrumb">
          <template v-for="(item,idx) in breadList">
              <div class="breadcrumb-item" v-show="idx == 0" @click="gotoBack(item,idx)">{{item.tit}}</div>
              <div class="breadcrumb-item" v-show="idx > 0 && idx < breadList.length-1"  @click="gotoBack(item,idx)"><span class="speter">>></span>{{item.tit}}</div>
              <div class="breadcrumb-item" v-show="idx == breadList.length-1"><span class="speter">>></span>{{item.tit}}</div>
          </template>
        </div>
      </div>
      <div class="list-box">
        <div class="list" v-for="(item,idx) in dataList" :key="idx">
          <div class="left">
            <div class="item">
              <img title="文件夹" @click="gotoChild(item)" v-if="item.type == 1" src="/img/filebox.png" alt="文件夹">
              <img title="资源组" @click="gotoChild(item)" v-if="item.type == 4" src="/img/filegroup.png" alt="资源组">
              <img title="资源"  @click="gotoPlay(item)" v-if="item.type == 2" src="/img/article.png" alt="资源">
            </div>
            <div class="descri-box">
              <div class="tit">
                {{item.name}}
                <span style="color:#888;font-size:12px;">
                    &nbsp;&nbsp;创建者:{{item.userName}}
                </span>
              </div>
              <div class="mark">
                <div class="des">{{item.mark || '暂无描述'}}</div>
                <div class="genxi-box">{{item.time}}</div>
              </div>
            </div>
          </div>
          <div class="right" >
            <el-button   @click="gotoPlay(item)">查看详情</el-button>
            <el-button type="success"  @click="goToAuit(item)">通过</el-button>
            <el-button type="danger"  @click="goToRefuse(item)">拒绝</el-button>
          </div>
        </div>
        <el-empty v-if="dataList.length==0" :image-size="100"></el-empty>
      </div>
      <div class="pagination-box">
        <el-pagination
            background
            hide-on-single-page
            layout="prev, pager, next, total"
            :total="total"
            :page-size="size"
            :current-page="page"
            @current-change="currentChange"
        >
          </el-pagination>
      </div>
    </div>
    <!-- 资源播放 -->
    <el-dialog
      title="资源预览"
      :visible.sync="playFlag"
      :modal-append-to-body="false"
      width="40%"
      top="30px"
    >
      <div v-if="playFlag" v-html="videoObj.artContent"></div>
    </el-dialog>
  </basic-container>
</template>
<script>
  import {
   getAduitList,aduitById
  } from "@/api/resource/depart";
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        dataList:[],
        page:1,
        size:8,
        total:0,
        searchVal:'',
        breadList:[{tit:'根目录',pid:0}],
        configLoading:false,
        // 资源预览相关
        playFlag:false,
        videoObj:{},
        // 审核id
        auditId:null
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
      userId() {
        return this.userInfo.user_id;
      }
    },
    mounted(){
      this.getListData()
    },
    methods: {
      goToAuit(item){
          this.auditId = item.id;
          this.$confirm('是否确认通过该条素材, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.confirmAduit()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '审核已取消！'
            });          
          });
      },
      async confirmAduit(){
       const data =await aduitById(this.auditId,1)
        this.$message({
          type: 'success',
          message: '审核成功!'
        });
         this.getListData()
     },
      goToRefuse(item){
          this.auditId = item.id;
          this.$confirm('是否确认拒绝该条素材, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.RefuseAduit()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '审核已取消！'
            });          
          });
      },
     async RefuseAduit(){
       const data =await aduitById(this.auditId,3)
        this.$message({
          type: 'success',
          message: '审核成功!'
        });
         this.getListData()
     },
     gotoPlay(item){
        this.playFlag = true;
        this.videoObj = item;
     },
     async getListData(){
       const res = await getAduitList(this.page,this.size,{searchVal:this.searchVal,pid:this.pid});
       this.dataList = res.data.data.list
       this.total = res.data.data.total
       this.page = res.data.data.page
     },
     currentChange(page){
        this.page = page
        this.getListData()
     },
     clickSearch(){
       this.getListData()
     },
     gotoChild(item){
       this.pageType = item.type
       this.page = 1
       this.dataList = []
       this.breadList.push({tit:item.name,pid:item.id,type:item.type})
       this.pid = item.id
       this.getListData()
     },
     gotoBack(item,idx){
       if(idx == 0){
         this.breadList = [{tit:'根目录',pid:0}]
         this.pageType =1
       }else{
           const newArr = this.breadList.slice(0,idx+1)
           this.breadList = newArr
           if(item.type){
             this.pageType =item.type
           }
       }
       this.pid = item.pid
       this.getListData()
     },
     handleClose(){
       this.cagOpenFlagh = false
       this.scbOpenFlagh=false;
     },
    }
  };
</script>

<style lang='scss' scoped>
.video-icon{
  position: absolute;
  left: 0;
  top: 0;
}
.bread-box{
  .speter{
    margin: 0 6px;
  }
  .breadcrumb{
    display: flex;
    align-items: flex-end;
    .breadcrumb-item{
      font-size: 14px;
      color: #bfbfbf;
      cursor: pointer;
      user-select: none;
      &:last-child{
        cursor: default;
        color: #333;
      }
    }
  }
}
.dictory-wapper{
  display: flex;
  flex-direction: column;
  min-height: 200px;
  .btn-box{
    padding-bottom: 18px;
    display: flex;
    justify-content: space-between;
    .search{
      width: 40%;
    }
  }
  .list-box{
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #ddd;
    height: auto;
    .list{
      display: flex;
      padding: 10px 20px 10px 20px;
      border-bottom: 1px solid #ddd;
      border-top: none;
      cursor: pointer;
      user-select: none;
      justify-content: space-between;
      .left{
        display: flex;
      }
      .right{
        height: 100%;
        display: flex;
        align-items: center;
        margin-top: 10px;
      }
      &:last-child{
          border-bottom: none;
      }
      .item{
        margin-right: 20px;
        img{
          width: 50px;
          margin-top: 10px;
        }
      }
      .descri-box{
        .tit{
          font-size: 16px;
          color: #333;
          padding-top: 10px;
          margin-bottom: 10px;
        }
        .mark{
          display: flex;
          align-items: flex-end;
          .des{
              font-size: 14px;
              margin-right: 16px;
              color: #bfbfbf;
          }
          .genxi-box{
              font-size: 14px;
              margin-right: 16px;
              color: #bfbfbf;
          }
        }
      }
    }
  }
  .pagination-box{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }
  .bread-box{
    margin-bottom: 18px;
  }
}
</style>
